<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学生管理系统主页</title>
    <link rel="shortcut icon" href="/static/images/logo_i.png">
    <link rel="stylesheet" href="/static/layui-v2.6.8/layui/css/layui.css">
    <script src="/static/layui-v2.6.8/layui/layui.js"></script>
    <link rel="stylesheet" href="reset.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        /*   头部样式 */
        .header .logo {
            height: 60px;
        }

        .header-content {
            /*设置为容器进行弹性布局*/
            display: flex;
            /*设置主轴（x轴）水平排列方式 两边对齐*/
            justify-content: space-between;
        }

        .header .logo-box {
            display: flex;
            justify-content: flex-start;
            /*设置侧轴（y轴）居中 查CSDN*/
            align-items: center;
            position: absolute;
            left: 0;
        }

        .header .ul1 {
            position: absolute;
            right: 100px;
        }

    </style>
</head>

<body>
<!--头部 start-->
<div class="header">
    <div class="layui-header layui-bg-cyan">
        <div class="layui-container header-content">
            <!--    logo start    -->
            <div class="layui-logo logo-box">
                <img src="/static/images/logo_i.png" alt="ONE-GO物" class="logo">
                <h2>学生管理系统</h2>
            </div>
            <!--    logo end    -->

            <!--    用户信息 start    -->
            <ul class="layui-nav layui-bg-cyan ul1">
                <!--                <li class="layui-nav-item"><a href="">学生查询</a></li>-->
                <!--                <li class="layui-nav-item"><a href="">学生</a></li>-->
                <!--                <li class="layui-nav-item"><a href="">大数据</a></li>-->
                <li class="layui-nav-item">
                    <a href="javascript:;">学生管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">学生查询</a></dd>
                        <dd><a href="">添加学生</a></dd>
                        <dd><a href="">开除学生</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">班级管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">最新班级</a></dd>
                        <dd><a href="">添加班级</a></dd>
                        <dd><a href="">管理班级</a></dd>
                    </dl>
                </li>
            </ul>
            <br>
            <!--  用户信息 end      -->
        </div>

    </div>

</div>

<!--头部 end-->
    <div class="layui-input-inline">
        <select name="modules" lay-verify="required" lay-search="" class="sel1">
            <option value="">请选择班级</option>
        </select>
        &emsp;<button type="button" class="layui-btn btn1">提交</button>
    </div>

<div class="layui-form box2">
    <table class="layui-table tb1">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>

        </thead>
        <tbody class="tb2">


        </tbody>
    </table>
</div>
<script type="text/javascript">
    // 下拉框
    sel1 = document.getElementsByClassName('sel1')
    t1 = document.getElementsByClassName('tb2'); // tbody表
    $.ajax({
        'method': 'get',
        'url': 'http://127.0.0.1:8000/user/classes',
        'success': function (data1) {
            res2 = data1
            for (i in res2) {
                name = res2[i].name
                id = (res2[i].id)
                // console.log(id ,typeof id)
                // a = (parseInt(i) + 1).toString()
                // console.log(i,typeof i)
                // console.log(typeof name)
                sel1[0].innerHTML += '<option value=' +id.toString()  + '>' + name + '</option>'  // value和class的id对应
            }
        }
    })
    $('.btn1').click(function () {
        class_id = $('.sel1').val()
        t1[0].innerHTML = ''
        // console.log(typeof class_id)
        $.ajax({
            'method': 'get',
            'url': 'http://127.0.0.1:8000/user/classes/'+class_id,
            'success':function (data1) {
                res3 = data1
                student_set = res3.student_set
                for (i in student_set){
                    name = student_set[i].name
                    age = (student_set[i].age).toString()
                    sex = student_set[i].sex
                    if (sex) {
                        sex = '男'
                    }
                    else {
                        sex = '女'
                    }
                    // name = student_set.name
                    console.log(student_set[i])
                    t1[0].innerHTML += `<tr>
                                        <td>${name}</td>
                                        <td>${age}</td>
                                        <td>${sex}</td>
                                    </tr>`
                }
            }
        })
    })
    $.ajax({
        'method': 'get',
        'url': 'http://127.0.0.1:8000/user/students',
        'success': function (data1) {
            res = data1
            for (i in res) {
                // console.log(i)
                // console.log(typeof i)
                // console.log(t1[i].innerHTML)
                name = res[i].name
                age = res[i].age
                sex = res[i].sex
                if (sex) {
                    sex = '男'
                } else {
                    sex = '女'
                }
                t1[0].innerHTML += '<tr ' + 'class=tr' + i + '>\n' +
                    '            <td>' + name + '</td>\n' +
                    '            <td>' + age.toString() + '</td>\n' +
                    '            <td>' + sex + '</td>\n' +
                    '        </tr>'

            }
        }

    })

</script>
</body>
</html>